﻿/* 240 */

@media screen 
and (min-width : 180px) 
and (max-width : 294px) {
	#header, #shout, #container, #copyright{max-width:90%; margin:0 auto;}
	
	.one_half, .two_third, 
	.one_third, .two_third, .three_third, 
	.one_quarter, .two_quarter, .three_quarter, .four_quarter, 
	.one_fifth, .two_fifth, .three_fifth, .four_fifth, .five_fifth{display:block; float:none; width:auto; margin:0 0 2% 0; padding:0;}
		
	.more{text-align:right; clear:both;}
	
	#header hgroup{display:block; width:100%; float:none; margin:0 0 15px 0; padding:0; text-align:center;}
	#header #topnav{display:block; width:100%; float:none; margin:0 auto; padding:0;}
	
	#container{padding:30px 0;}
	#container #content, #container #right_column{float:none; width:auto; margin-bottom:50px;}
	aside h2{text-align:left;}
	
	#shout figure div{float:none; width:100%; text-align:center;}
	#shout figure figcaption{float:none; width:100%; margin-bottom:15px;}
	#shout figure figcaption h1{display:block; margin:0 0 15px 0; font-size:2em;}

	#homepage{padding:0;}
	#homepage #latest_work, #homepage #latest_work article, #homepage #latest_work article img, #homepage #intro article, #homepage #intro article h2{margin-bottom:20px;}
	#homepage #latest_work, #homepage #intro article{padding-bottom:20px; border-bottom:1px solid #ECECEC;}
	#homepage #intro article.last{margin-bottom:0; padding-bottom:0; border-bottom:none;}
	#homepage #intro article ul.testimonials li{background:none;}
	#homepage #intro article ul.testimonials li p.name{margin:0 0 20px 0; padding:0;}
	#homepage #intro article ul li figure div.imgl{float:none; display:inline-block; margin:0 0 10px 0;}
	
	#portfolio ul li, #gallery figure ul li{display:block; float:none; width:100%; margin:0 0 20px 0; padding:0;}
	#portfolio ul li.last{margin-bottom:0;}
	#gallery ul li.last{margin-bottom:20px;}

	#header, #copyright{text-align:center;}
	#copyright p{float:none; line-height:1.6em;}
	#copyright p:first-child{margin-bottom:8px;}
}

/* 295 */

@media screen 
and (min-width : 295px) 
and (max-width : 319px) {
	#header, #shout, #container, #copyright{max-width:90%; margin:0 auto;}
	
	.one_half, .two_third, 
	.one_third, .two_third, .three_third, 
	.one_quarter, .two_quarter, .three_quarter, .four_quarter, 
	.one_fifth, .two_fifth, .three_fifth, .four_fifth, .five_fifth{display:block; float:none; width:auto; margin:0 0 2% 0; padding:0;}
		
	.more{text-align:right; clear:both;}
	
	#header hgroup{display:block; width:100%; float:none; margin:0 0 15px 0; padding:0; text-align:center;}
	#header #topnav{display:block; width:100%; float:none; margin:0 auto; padding:0;}
	
	#container{padding:30px 0;}
	#container #content, #container #right_column{float:none; width:auto; margin-bottom:50px;}
	aside h2{text-align:left;}
	
	#shout figure div{float:none; width:100%; text-align:center;}
	#shout figure figcaption{float:none; width:100%; margin-bottom:15px;}
	#shout figure figcaption h1{display:block; margin:0 0 15px 0; font-size:2.6em;}

	#homepage{padding:0;}
	#homepage #latest_work, #homepage #latest_work article, #homepage #latest_work article img, #homepage #intro article, #homepage #intro article h2{margin-bottom:20px;}
	#homepage #latest_work, #homepage #intro article{padding-bottom:20px; border-bottom:1px solid #ECECEC;}
	#homepage #intro article.last{margin-bottom:0; padding-bottom:0; border-bottom:none;}
	#homepage #intro article ul.testimonials li{background:none;}
	#homepage #intro article ul.testimonials li p.name{margin:0 0 20px 0; padding:0;}
	#homepage #intro article ul li figure div.imgl{float:none; display:inline-block; margin:0 0 10px 0;}
	
	#portfolio ul li{display:block; float:none; width:100%; margin:0 0 20px 0; padding:0; text-align:center;}
	#portfolio ul li.last{margin-bottom:0;}
	#portfolio ul li article figure figcaption{display:block; width:70%; margin:0 auto; text-align:center; color:#666666; background-color:#E8E8E8;}
	
	#gallery figure header, #gallery figure figcaption{margin:0 5px 15px 5px;}
	#gallery figure ul li{display:block; float:left; width:46.22641%; margin:0 5px 15px 5px; padding:0;}
	
	#header, #copyright{text-align:center;}
	#copyright p{float:none; line-height:1.6em;}
	#copyright p:first-child{margin-bottom:8px;}
}

/* 320px */

@media screen 
and (min-width : 320px) 
and (max-width : 360px) {
	#header, #shout, #container, #copyright{max-width:90%; margin:0 auto;}
	
	.one_half, .two_third, 
	.one_third, .two_third, .three_third, 
	.one_quarter, .two_quarter, .three_quarter, .four_quarter, 
	.one_fifth, .two_fifth, .three_fifth, .four_fifth, .five_fifth{display:block; float:none; width:auto; margin:0 0 2% 0; padding:0;}
		
	.more{text-align:right; clear:both;}
	
	#header hgroup{display:block; width:100%; float:none; margin:0 0 15px 0; padding:0; text-align:center;}
	#header #topnav{display:block; width:100%; float:none; margin:0 auto; padding:0;}
	
	#container{padding:30px 0;}
	#container #content, #container #right_column{float:none; width:auto; margin-bottom:50px;}
	aside h2{text-align:left;}
	
	#shout figure div{float:none; width:100%; text-align:center;}
	#shout figure figcaption{float:none; width:100%; margin-bottom:15px;}
	#shout figure figcaption h1{display:block; margin:0 0 15px 0; font-size:2.6em;}

	#homepage{padding:0;}
	#homepage #latest_work, #homepage #latest_work article, #homepage #latest_work article img, #homepage #intro article, #homepage #intro article h2{margin-bottom:20px;}
	#homepage #latest_work, #homepage #intro article{padding-bottom:20px; border-bottom:1px solid #ECECEC;}
	#homepage #intro article.last{margin-bottom:0; padding-bottom:0; border-bottom:none;}
	#homepage #intro article ul.testimonials li{background:none;}
	#homepage #intro article ul.testimonials li p.name{margin:0 0 20px 0; padding:0;}
	#homepage #intro article ul li figure div.imgl{float:none; display:inline-block; margin:0 0 10px 0;}
	
	#portfolio ul li{display:block; float:none; width:100%; margin:0 0 20px 0; padding:0; text-align:center;}
	#portfolio ul li.last{margin-bottom:0;}
	#portfolio ul li article figure figcaption{display:block; width:65%; margin:0 auto; text-align:center; color:#666666; background-color:#E8E8E8;}
	
	#gallery figure header, #gallery figure figcaption{margin:0 5px 15px 5px;}
	#gallery figure ul li{display:block; float:left; width:46.22641%; margin:0 5px 15px 5px; padding:0;}
	
	#header, #copyright{text-align:center;}
	#copyright p{float:none; line-height:1.6em;}
	#copyright p:first-child{margin-bottom:8px;}
}

/* 480px + 515px */

@media screen 
and (min-width : 361px) 
and (max-width : 599px) {
	#header, #shout, #container, #copyright{max-width:95%; margin:0 auto;}
	
	.more{text-align:right; clear:both;}
	
	#header hgroup{display:block; width:100%; float:none; margin:0 0 15px 0; padding:0;}
	#header #topnav{display:block; width:100%; float:none; margin:0 auto; padding:0;}
	
	#container #content, #container #right_column{float:none; width:auto; margin-bottom:50px;}
	aside h2{text-align:left;}
	
	#shout figure div{float:none; width:100%; text-align:center;}
	#shout figure figcaption{float:none; width:95%; margin:0 auto 15px;}
	#shout figure figcaption h1{display:block; margin:0 0 15px 0; font-size:2.6em;}
	
	#homepage #intro article ul li figure div.imgl{float:none; display:inline-block; margin:0 0 10px 0;}
	
	#portfolio ul li{display:block; float:left; width:45.60439%; margin:0 10px 15px 10px; padding:0;}
	
	#copyright p{float:none;}
	#copyright p:first-child{margin-bottom:8px;}
}

/* 600px */

@media screen 
and (min-width : 600px) 
and (max-width : 767px) {
	#header, #shout, #container, #copyright{max-width:95%; margin:0 auto;}

	#header hgroup{display:block; width:100%; float:none; margin:0 0 15px 0; padding:0;}
	#topnav li{margin-bottom:15px;}

	#shout{padding:0;}
	#shout figure figcaption h1{display:block; margin-top:8%; font-size:2.6em;}
	#shout figure figcaption p{font-size:.8em; line-height:1.6em;}
	
	#homepage #intro article ul li figure div.imgl{float:none; display:inline-block; margin:0 0 10px 0;}
}

/* 768px */

@media screen 
and (min-width : 768px) 
and (max-width : 959px) {
	#header, #shout, #container, #copyright{max-width:95%; margin:0 auto;}

	#header hgroup{display:block; width:100%; float:none; margin:0 0 15px 0; padding:0;}
	#topnav li{margin-bottom:15px;}
	
	#shout{padding:0;}
	#shout figure figcaption h1{margin-top:10%; font-size:3.5em;}
}

/* 960px */

@media screen and (min-width: 960px) {
	#header, #shout, #container, #copyright{max-width:960px; margin:0 auto;}
}